<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>评论页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/components.css" />
		<link rel="stylesheet" type="text/css" href="../css/news.css" />
		<link rel="stylesheet" type="text/css" href="../css/vue-loaders.css"/>
		<style>
			p {
				margin: 0 !important;
			}
			#comment-wrapper {
				position: relative;
				margin-top: 60px;
			}
			.total {
				color: #333;
				padding-left: 15px;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}
			.comment-content {
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				padding: 15px;
				display: flex;
			}
			.head-portrait {
				width: 40px;
				height: 40px;
			}
			.head-portrait img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
			.comment-text {
				color: #000000;
				font-size: 16px;
				margin-left: 10px;
				flex: 1;
			}
			.likes {
				font-size: 12px;
				float: right;
				padding-right: 2vw;
				color: #999;
			}
			
			.author {
				font-weight: bold;
			}
			
			.comment-middle {
				margin-top: 5px;
			}
			
			.comment-middle p {
				font-size: 16px;
				color: #3b3d3d;
			}
			
			.comment-footer {
				margin-top: 10px;
				color: #ababb0;
				font-size: 12px;
			}
			.placeholder_image {
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				border-bottom: 1px solid #;
				vertical-align: baseline;
				text-align: center;
				background: url(../img/placeholder.png) no-repeat 21vh 23vh;
				background-size: 22vh 25vh;
				height: 76vh;
				background: #FFFFFFF;
			}
			
			.placeholder_image p {
				padding-top: 48vh;
				color: rgba(66, 66, 66, 0.2);
			}
			
			.short-comment-switch {
				color: #333;
				margin-right: 6vw;
				float: right;
			}
			#popover {
				width: 80vw;
				left: 10vw;
				top: 40vh;
				height: 18vh;
				position: fixed;
			}
			.loader-animation{
				float: left;
				margin: 24px 0 0 40px;
				width:85px;
			}
			.loader-text{
				line-height: 18vh;
				margin-left: 100px;
				font-size: 18px;
				color: #838080;
			}
		</style>
	</head>
	<body>
		<!--评论容器-->
		<div id="comment-wrapper">
			<header class="mui-bar mui-bar-nav app-bar">
				<div class="app-bar-left">
					<span class="mui-action-back iconfont icon-fanhui"></span>
					<span class="title">{{comments_total}}条点评</span>
				</div>
			</header>
			<!-- 弹出层 -->
			<div id="popover" class="mui-popover">
				<div class="loader-animation"> 
					<ball-spin-fade-loader color="#4FBCF5" size="12px" ><ball-spin-fade-loader>
				</div>
				<div class="loader-text"> 
					正在加载...
				</div>
			</div>


			<!--短评论-->
			<div class="short-comment" ref='short'>
				<div class="total" @click="open_short_comments">
					<span>{{short_comments}}条短评
						<span class="short-comment-switch" v-if="short_comment_switch">︾</span>
						<span class="short-comment-switch" v-else>︽</span>
					</span>
				</div>
				<template v-if="short_comments_data.length">
					<div class="comment-content" v-for="item in short_comments_data" :key="item.id">
						<div class="head-portrait">
							<img :src="item.avatar" />
						</div>
						<div class="comment-text">
							<div class="comment-head">
								<span class="author">{{item.author}}</span>
								<span class="likes"><i class="iconfont icon-dianzan "></i>{{item.likes}}</span>
							</div>
							<div class="comment-middle">
								<p>{{item.content}}</p>
								<p v-if="item.reply_to"><b>//{{item.reply_to.author}}:</b>{{item.reply_to.content}}</p>
							</div>
							<div class="comment-footer">
								<span class="time">{{time(item.time)}}</span>
								<span class="more"><!--展开--></span>
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/components.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-loaders.umd.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				beforeback: function() {
					vm.submit();
					window.scrollTo(0, 0); //重置滚动条位置
				}
			});
			Vue.use(VueLoaders);
			var vm = new Vue({
				el: "#comment-wrapper",
				data: {
					id: '',
					comments_total: '',
					short_comments: '',
					long_comments: '',
					long_comments_data: '',
					short_comments_data: '',
					short_comment_switch: true,
					height: 0
				},
				created() {
					this.defaultData = JSON.parse(JSON.stringify(this.$data));
				},
				methods: {
					time: function(num) {
						var time = new Date(num * 1000);
						return(time.getMonth() + 1) + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes();
					},
					PrefixInteger: function(num, n) {
						return(Array(n).join(0) + num).slice(-n);
					},
					//展开短评论
					open_short_comments: function() {
						if(this.short_comment_switch) {
							mui('.mui-popover').popover('toggle');
							this.init_short_comments_data();
							this.height = this.$refs.short.offsetTop;
							setTimeout(function() {
								window.scrollTo({
									top: vm.height - 55,
									left: 0,
									behavior: 'smooth'
								});
							}, 200)
							this.short_comment_switch = false;
						} else {
							setTimeout(function() {
								vm.short_comments_data = '';
							}, 300)
							window.scrollTo({
								top: 0,
								left: 0,
								behavior: 'smooth'
							});
							this.short_comment_switch = true;
						}

					},
					init_long_comments_data: function() {
						mui.ajax('https://news-at.zhihu.com/api/4/story/' + this.id + '/long-comments', {
							type: 'GET',
							dataType: 'json',
							timeout: 3000,
							success: function(rsp) {
								mui('.mui-popover').popover('toggle');
								vm.long_comments_data = rsp.comments;
							},
							error: function(xhr, type, errorThrown) {
								//弹出系统提示窗
								mui.toast('获取内容失败');
							}
						});
					},
					init_short_comments_data: function() {
						mui.ajax('https://news-at.zhihu.com/api/4/story/' + this.id + '/short-comments', {
							type: 'GET',
							dataType: 'json',
							timeout: 3000,
							success: function(rsp) {
								vm.short_comments_data = rsp.comments;
								mui('.mui-popover').popover('toggle');
							},
							error: function(xhr, type, errorThrown) {
								//弹出系统提示窗
								mui.toast('获取内容失败');
							}
						});
					},
					submit() {
						// 送出後
						this.$data = Object.assign(this.$data, this.defaultData);
					}
				}
			})

			document.addEventListener('open_comment', function(event) {
				var data = event.detail;
				if(!data) {
					return;
				}
				vm.id = data.id;
				//点论总数
				vm.comments_total = data.extra.comments;
				//短评总数
				vm.short_comments = data.extra.short_comments;
				//长评总数
				vm.long_comments = data.extra.long_comments;
				mui('.mui-popover').popover('toggle')
				vm.init_long_comments_data();
			});
		</script>
	</body>

</html>